<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
	font-family: "calibri", arial;
}

.inputBox {
	width: 500px;
	height: 300px;
}

.submit {
	height: 50px;
}

.templateText {
	display: none;
}

.error {
	color: red;
}

.responseFrame {
	width: 700px;
	height: 400px;
	border-style: solid;
	border-width: 1px;
	border-color: #999999;
	padding: 1px;
}
</style>
<title>Test Services</title>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/json2.js"></script>
<script type="text/javascript" src="scripts/jsonformatter.js"></script>


<script lang="javascript">
	String.prototype.trim = function() {
		return this.replace(/^\s*/, "").replace(/\s*$/, "");
	}

	String.prototype.tabreplace = function() {
		return this.replace(/\t/g, "  ");
	}

	function setError(msg) {
		var errorSpan = document.getElementById("errorMessage");
		errorSpan.innerHTML = msg
	}
	function clearError() {
		setError("");
	}

	function reset() {
		clearError();
		document.getElementById("requestValue").value = "";
		document.getElementById("service").options[0].selected = true;
		document.getElementById("serviceName").value = "public.service"

	}

	function getTemplateText(templateName) {
		return document.getElementById(templateName).innerHTML
	}

	function updateParameters(select) {
		var requestTextArea = document.getElementById("requestValue");

		if (requestTextArea.value == "") {
			rqstval = (getTemplateText(select.options[select.selectedIndex].text));
			requestTextArea.value = FormatText(rqstval);
		} else {
			setError("request must first be cleared before picking another template");
			return false;
		}
	}

	function initAvailableTemplates() {
		var templatesDiv = document.getElementById("templates");
		var subdivs = templatesDiv.getElementsByTagName("div");
		var servicedd = document.getElementById("service");

		for (i = 0; i < subdivs.length; i++) {
			var node = subdivs[i];
			var option = document.createElement("option");
			option.text = node.id;
			servicedd.add(option, null);
		}

	}

	function submit() {
		var form = document.getElementById("form");
		var serviceName = document.getElementById("serviceName");
		var request = document.getElementById("request");
		var requestValue = document.getElementById("requestValue");

		form.action = serviceName.value;
		form.request.value = requestValue.value;
		form.target = "response";
		form.submit();

		return true;
	}

	function formatResponse() {
		var responseFrame = document.getElementById("response");
		var body = (responseFrame.contentDocument.getElementsByTagName("pre")[0].innerHTML);
		responseFrame.contentDocument.getElementsByTagName("pre")[0].innerHTML = FormatText(body);
	}
</script>

</head>

<body onload="initAvailableTemplates()">

	<form id="form" action="public.service">
		<input type="hidden" name="request" />
	</form>

	<table align="center">
		<tr>
			<td colspan="2" style="font-weight: bold;"><h1>Services
					Test Page</h1></td>
		</tr>
		<tr>
			<td colspan="2"><input type="checkbox" checked="checked"
				id="SORT" />Sort JSON Elements</td>
		</tr>
		<tr>
			<td>serviceName</td>
			<td><input type="text" id="serviceName" value="public.service" /></td>
		</tr>
		<tr>
			<td>template</td>
			<td><select id="service" onchange="updateParameters(this)">
					<option>none</option>
			</select>
				<button type="button" class="button" onclick="reset()">Reset</button></td>
		</tr>
		<tr>
			<td colspan="2"><div id="errorMessage" class="error"></div></td>
		</tr>
		<tr>
			<td>request</td>
			<td><textarea id="requestValue" name="request" class="inputBox"></textarea></td>
		</tr>
		<tr>
			<td></td>
			<td><button type="submit" class="button" onclick="submit()">Submit</button>
			</td>
		</tr>
		<tr>
			<td colspan="2" style="color: red;" id="errorLabelContainer"></td>
		</tr>
		<tr>
			<td colspan="2"><iframe id="response" name="response"
					class="responseFrame" onload="formatResponse()"></iframe></td>
		</tr>
	</table>

	<div id="templates" class="templateText">

		<!-- Retrieve items by group ( for managing new entries )-->
		<div id="getAllProductivityTypes">{
			"serviceName":"getAllProductivityTypes" }</div>

		<div id="getAllMetricsForProductivityType">{ "serviceName":
			"getAllMetricsForProductivityType", "productivityType": { "name":
			"Productive" } }</div>

		<div id="getAllWorkgroupsForMetric">{
			"serviceName":"getAllWorkgroupsForMetric", "metric": { "name":
			"Development" } }</div>
		<div id="getAllTasksForWorkgroup">{
			"serviceName":"getAllTasksForWorkgroup", "workgroup":{ "name": "BDM"
			} }</div>
			
			
		<!--  -->
			
			
			
	</div>


</body>
</html>
